<template>
  <div class="main">
    <div class="box">
      <table class="kuangao">
        <thead>
          <tr>
            <th>序号</th>
            <th>电影名称</th>
            <th>价格</th>
            <th>上架时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="p in arr" :key="p.id">
            <td>{{ p.id }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.price|filterPrice }}</td>
            <td>{{ p.time|dateFormat }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        arr: [
          {
            id: 1,
            name: "姜子牙",
            price: 30.0,
            time: 1607928388132,
          },
          {
            id: 2,
            name: "我和我的祖国",
            price: 45.0,
            time: 1307928388132,
          },
          {
            id: 3,
            name: "我和我的家乡",
            price: 32.1,
            time: 1407928388132,
          },
        ],
      };
  },
};
</script>
<style scoped>
.main {
  height: 500px;
  background: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 770px;
  height: 480px;
  background: #fff;
}
table {
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black;
}
.kuangao{
  width: 600px;
  height: 200px;
  margin: 100px auto;

}
</style>
